<template>
  <div class="base-info-view">
    <el-form
      class="form-detail"
      label-position="right"
      label-width="120px"
    >
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-col :span="8">
          <el-form-item
            label="流程编号："
            style="width: 100%;"
          >
            <span>{{ detailData.processNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="创建时间："
            style="width: 100%;"
          >
            {{ dateFormat('yyyy-mm-dd HH:MM', detailData.startTime) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="创建人："
            style="width: 100%;"
          >
            <span>{{ detailData.initiator }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div
      class="table-list"
      style="margin-bottom:20px"
    >
      <item-title title="变更终端列表" />
      <el-table
        ref="multipleTable"
        header-cell-class-name="table-header"
        :data="data?.Standards"
        :border="true"
        style="width: 100%"
        max-height="400px"
      >
        <el-table-column
          label="终端编号"
          prop="terminalNo"
          header-align="center"
          align="center"
        >
          <template #default="scope">{{ scope.row.terminalNo }}</template>
        </el-table-column>
        <el-table-column
          label="终端名称"
          prop="terminalName"
          header-align="center"
        />
        <el-table-column
          label="所在地区"
          header-align="center"
          align="center"
        >
          <template #default="scope">
            <div>{{ scope.row.provinceName }} / {{ scope.row.cityName }} / {{ scope.row.areaName }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="原市场价（元）"
          header-align="center"
          align="center"
        >
          <template #default="scope">
            <div>{{ scope.row.productInfoDetail.marketPrice }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="原终端价（元）"
          header-align="center"
          align="center"
        >
          <template #default="scope">
            <div>{{ scope.row.terminalPrice }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="原准入模式"
          prop="accessMode"
          header-align="center"
          align="center"
        >
          <template #default="scope">
            <div>
              {{ getLabel('access_mode', scope.row.accessMode) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="原关联产品价格"
          prop="priceNumber"
          header-align="center"
          align="center"
        >
          <template #default="scope">
            <div>
              {{ scope.row.productPriceStrategyDetail?.priceNumber }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="营销模式"
          prop="sellMode"
          header-align="center"
          align="center"
        >
          <template #default="scope">
            <span v-if="scope.row?.sellMode !== 'direct'">
              {{ scope.row?.agentAttribute === '1' ?'区域招商':'精细招商' }}
            </span>
            <span v-else> 终端直销</span>
          </template>
        </el-table-column>
        <el-table-column
          label="渠道客户名称"
          header-align="center"
        >
          <template #default="scope">
            <div>
              {{ scope.row.agentDetail?.agentName }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="price-container">
      <item-title title="变更后终端价信息" />
      <el-form
        class="form-detail"
        label-position="right"
        label-width="120px"
        style="padding-left:20px;"
      >
        <el-row
          :gutter="20"
          style="width:100%"
        >
          <el-form-item
            label="产品编号："
            style="width: 50%"
          >
            <div>{{ data?.VProductPriceStrategy?.productNumber }}</div>
          </el-form-item>
          <el-form-item
            label="产品名称："
            style="width: 50%"
          >
            <div>{{ getProductName(data?.VProductPriceStrategy) }}</div>
          </el-form-item>
          <el-form-item
            label="终端价："
            style="width: 50%"
          >
            <div>
              <span>{{ data?.VProductPriceStrategy?.terminalPrice }}元</span>
              <span v-if="data?.VProductPriceStrategy?.sellUnit">/{{ getLabel('sell_unit',data?.VProductPriceStrategy?.sellUnit) }}</span>
            </div>
          </el-form-item>
          <el-form-item
            label="价格编号："
            style="width: 50%"
          >
            <div>{{ data?.VProductPriceStrategy?.priceNumber }}</div>
          </el-form-item>
          <el-form-item
            label="准入模式："
            style="width: 50%"
          >
            <div>{{ getLabel('access_mode', data?.VProductPriceStrategy?.accessMode) }}</div>
          </el-form-item>
          <el-form-item
            label="适用地区："
            style="width: 50%"
          >
            <area-list-view :areas="data?.VProductPriceStrategy?.region" />
          </el-form-item>
          <el-form-item
            label="适用终端："
            style="width: 50%"
          >
            <div>{{ getLabel('app_mode', data?.VProductPriceStrategy?.terminalType) }}</div>
          </el-form-item>
          <el-form-item
            label="市场价："
            style="width: 50%"
          >
            <div>
              <span>{{ data?.VProductPriceStrategy?.marketPrice }}元</span>
              <span v-if="data?.VProductPriceStrategy?.sellUnit">/{{ getLabel('sell_unit',data?.VProductPriceStrategy?.sellUnit) }}</span>
            </div>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

  </div>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'

export default {
  name: 'ClientPriceBaseInfo',
  props: {
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    var reactiveData = reactive({
      detailData: {},
      data: props.detailData.data,
    })
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          reactiveData.detailData = newval
          reactiveData.data = newval.data
          console.log(232)
        }
      },
      { immediate: true, deep: true }
    )
    return {
      ...toRefs(props),
      ...toRefs(reactiveData),
    }
  },
}
</script>

<style scoped>
</style>
